<template>
    <div class="remindA">
        <img class="remindA_img" src="../../../assets/图层 1.png" alt="">
        <p class="remindA_p">{{ title }}</p>
        <div class="remindA_div" v-for="item in fundata(data)">{{ item }}</div>
    </div>
</template>

<script>
export default {
    props: ["data", "title"],
    methods: {
        fundata(res) {
            let number = this.splitAndPadNumber(res)
            let arr = number.split('')
            return arr
        },
        splitAndPadNumber(number) {
            // 将数字转换为字符串
            let numberStr = number.toString();

            // 使用正则表达式按每 4 个字符分割字符串，但确保最后一部分不会拆分
            let parts = numberStr.match(/.{1,5}/g);

            // 遍历每个部分，并在不足 4 位的情况下补零
            parts = parts.map(part => part.padStart(5, '0'));

            return parts.join('');
        }
    }
}
</script>

<style lang="scss" scoped>
.remindA {
    display: flex;
    align-items: center;

    .remindA_img {
        width: 70px;
        height: 76px;
    }

    .remindA_p {
        margin: 0;
        padding: 31px 9px 29px 13px;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #D0E5F5;

    }

    .remindA_div {
        width: 44px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: url('@/assets/矩形 20.png');
        font-family: DIN;
        font-weight: bold;
        font-size: 22px;
        color: #FFFFFF;
        line-height: 31px;
        font-style: linear-gradient(0deg, rgba(255, 255, 255, 0.84) 15.91796875%, rgba(105, 185, 215, 0.62) 37.7197265625%, rgba(255, 255, 255, 0.21) 79.3212890625%);
    }
}
</style>